<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">

				<el-form-item>
					<el-input v-model="filters.name" placeholder="渠道商名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.phonenum" placeholder="联系电话"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUser">查询</el-button>
				</el-form-item>
				<el-form-item>
				<el-button type="primary" v-show="isShowSupper" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<template>
			<el-table :data="users" highlight-current-row v-loading="loading" border max-height="620" style="width: 100%;">
				<el-table-column type="index" width="80" label="编号">
				</el-table-column>
				<el-table-column prop="username" label="渠道商名称" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="phonenum" label="联系电话"   >
				</el-table-column>
				<el-table-column prop="usertype" label="用户类型"  :formatter="formatUserType"   >
				</el-table-column>
				<el-table-column prop="userstatus" label="状态" show-overflow-tooltip :formatter="formatUserStatus" >
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间"   >
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip >
				</el-table-column>
				<el-table-column label="操作"    width="220">
					<template scope="scope"   >
						<!--<el-button size="small"   @click="handleEnable(scope.$index, scope.row)">-->
							<!--{{scope.row.userstatus == 2 ? '启用' : '禁用'}}-->
						<!--</el-button>-->
						<el-button size="small" v-show="isShowSupper"  @click="handleEdit(scope.$index, scope.row)">
						编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				layout="total,sizes,prev, pager, next"
				:total="total">
		</el-pagination>
		<!--新增界面-->
		<el-dialog title="新增系统用户" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="username">
					<el-input v-model="addForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="phonenum">
					<el-input v-model="addForm.phonenum" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<!--用户类型 1 管理员 2超级管理员 3 下游渠道商 4上游渠道商-->
				<el-form-item label="用户类型" prop="usertype">
					<el-select v-model="addForm.usertype" placeholder="用户类型">
						<el-option value="1" label="管理员">管理员</el-option>
						<el-option value="5" label="宽带渠道">宽带渠道</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="addForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑系统用户" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="姓名" prop="username">
					<el-input v-model="editForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="phonenum">
					<el-input v-model="editForm.phonenum" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="editForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<!--用户类型 1 管理员 2超级管理员 3 下游渠道商 4上游渠道商-->
				<el-form-item label="用户类型" prop="usertype">
					<el-select v-model="editForm.usertype" placeholder="用户类型">
						<el-option value="1" label="管理员">管理员</el-option>
						<el-option value="3" label="分销商">分销商</el-option>
						<el-option value="4" label="供货商">供货商</el-option>
						<el-option value="5" label="宽带渠道">宽带渠道</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="editForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>

</template>
<script>
	import { getUserListPage ,getUserLogList,handleEnableShop,addSystemUser,upadteSystemUser} from '../../api/api';
	//import NProgress from 'nprogress'
    var crypto = require('crypto');
	export default {
		data() {
			return {
				filters: {
					name: '',
                    phonenum:''
				},
                isShowSupper:JSON.parse(sessionStorage.getItem("user")).usertype === 2 ? true : false,
				start:0,
				pageSize:10,
                total:0,
				loading: false,
				users: [],
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    username: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    phonenum:[
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' },
                        { required: true, message: '请输入用户电话', trigger: 'blur' }
                    ],
					password:[
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' },
                        { required: true, message: '请输入用户密码', trigger: 'blur' }
                    ],
					usertype:[
                        { required: true, message: '请选择用户类型', trigger: 'blur' }
                    ],
                },
                //新增界面数据
                addForm: {
                    username: '',
                    phonenum: '',
                    password: '',
                    usertype: '1',
                    remark: ''
                },

                editFormVisible: false,//新增界面是否显示
                editLoading: false,
                editFormRules: {
                    username: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    phonenum:[
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' },
                        { required: true, message: '请输入用户电话', trigger: 'blur' }
                    ],
                    password:[
                        { min: 1, max: 30, message: '长度在 1 到 20 个字符', trigger: 'blur' },
                        { required: true, message: '请输入用户密码', trigger: 'blur' }
                    ],
                    usertype:[
                        { required: true, message: '请选择用户类型', trigger: 'blur' }
                    ],
                },
                //新增界面数据
                editForm: {
                    username: '',
                    phonenum: '',
                    password: '',
                    usertype: '1',
                    remark: ''
                },
			}
		},
		methods: {
			//用户类型转换
            formatUserType: function (row, column) {
                //1 管理员 2超级管理员 3 下游渠道商
				return row.usertype == 1 ? '管理员' : row.usertype == 2 ? '超级管理员' : row.usertype == 3 ? '分销商':  row.usertype == 5 ? "宽带业务下游" : "供货商";
			},
            formatUserStatus: function (row, column) {
                return row.userstatus === 1 ? '正常' : row.userstatus === 2 ? '禁用' : "其他";
            },
            handleAdd:function(){
				this.addFormVisible = true;
			},
            addSubmit:function(){
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
//                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);
                            var md5 = crypto.createHash('md5');
                            para.password = md5.update(para.password).digest('hex');
                            addSystemUser(para).then((datas) => {
//                                this.addLoading = false;
                                let { message, code, data } = datas;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                                this.getUser();
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                            }).catch(function (error) {
                                console.log(error);
//                                this.addLoading = false;
                            });
                        });
                    }
                });
			},
			//获取用户列表
			getUser: function () {
				let para = {
                    shopName: this.filters.name,
					start:this.start,
					pageSize:this.pageSize,
                    phonenum:this.filters.phonenum,
					userstatus:''
				};
				this.loading = true;
                getUserListPage(para).then(datas => {
                    this.loading = false;
                    //NProgress.done();
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.users = data.result;
                        this.total = data.totalCount;
                    }
                }).catch(e =>{

				});
			},handleCurrentChange:function(val){
                this.start = val - 1;
                this.getUser();
			},
            handleSizeChange:function(val){
			    this.pageSize = val;
			    this.getUser();
			},
            handleEnable: function (index, row) {
                this.$confirm('确认更新该商家状态吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {
                        userstatus: row.userstatus == "2" ? "1" : "2",
                        useruuid: row.useruuid
                    };
                    handleEnableShop(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        let { message, code, data } = res;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                        }
                        this.getUser();
                    });
                }).catch(() => {

                });
            },handleEdit:function(index, row){
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
                this.editForm.usertype = row.usertype+"";
			},editSubmit(){
                let para = Object.assign({}, this.editForm);
                para.usertype = this.editForm.usertype ;
                var md5 = crypto.createHash('md5');
                para.password = md5.update(para.password).digest('hex');
                this.$confirm('确认编辑该用户信息吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.editFormVisible = true;
                    upadteSystemUser(para).then((res) => {
                        this.editFormVisible = false;
                        //NProgress.done();
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.getUser();
                    });
                }).catch(() => {

                });
            }
		},

		mounted() {
			this.getUser();
		},
    	beforeCreate: function (){
//            window.location.reload();
		}
	};

</script>

<style scoped>

</style>
